利用Twitter API 將資料導入設計的網站版面裡
用HTML設計版面，然後導入動態資訊。

首先，載入Twitter的API。
http://search.twitter.com/search.json?q={keywords}&callback={function}

導入Twitter程式碼：

callback({
  "page": 1,
  "query": "{keywords}",
  "results": [{
    "created_at": "Mon, 13 Feb 2012 01:23:45 +0000",
    "from_user": "ladiesman217"
    "from_user_id": 123456789,
    "profile_image_url": "http://www..jpg",
    "text": "I'm eating food!"
  }]
})

導入回應：

function searchTwitter() {
  var node = document.getElementsByTagName("script")[0];
  var script = document.createElement("script");
  node.parentNode.insertBefore(script, node);
  script.src = "http://search.twitter.com/search.json?q=from:dalmaer&callback=searchTwitterCallback";
}

Twitter的服務器響應時，它會通過一個JSON對象，我們的回調，我們可以使用採摘的數據：

function searchTwitterCallback(response) {
  //do something
}

設計框架：

<table id="twitter_box">
  <tr>
    <td>
      <img border="0" /><div class="name"></div>
    </td>
    <td>
      <div class="txt"></div>
      <div class="date"></div>
    </td>
  </tr>
<table>



<table id="twitter_box">
  <tr data-qrepeat="twt results">
    (truncated)
  </tr>
</table>



<table id="twitter_box">
  <tr data-qrepeat="twt results">
    <td>
      <img border="0" /><div class="name" data-qtext="twt.from_user"></div>
    </td>
    <td>
      <div class="txt" data-qtext="twt.text"></div>
      <div class="date" data-qtext="twt.created_at"></div>
    </td>
  </tr>
</table>




<td>
  <img border="0" data-qattr="src twt.profile_image_url" />
</td>




function searchTwitterCallback(response) {
  var node = document.getElementById("twitter_box");
  distal(node, response);
}

調用Twitter的回調函數，在
Body

之前加入以下程式碼：

<script>searchTwitter();</script>

現在在瀏覽器加載網頁，看看是什麼樣子。

導入CSS設計

function searchTwitter() {
  var node = document.getElementsByTagName("script")[0];
  var script = document.createElement("script");
  node.parentNode.insertBefore(script, node);
  script.src = "http://search.twitter.com/search.json?q=from:dalmaer&callback=searchTwitterCallback";
}

0

function searchTwitter() {
  var node = document.getElementsByTagName("script")[0];
  var script = document.createElement("script");
  node.parentNode.insertBefore(script, node);
  script.src = "http://search.twitter.com/search.json?q=from:dalmaer&callback=searchTwitterCallback";
}

1
成品：